<template>
  <div class="pbox">
    <Box title="煤炭仓储量/销量">
      <template #topRight>
        <div class="rightBtn">
          <BaseButton
            v-for="item in btnArr"
            :checked="item.checked"
            @click="btnFn(item)"
            >{{ item.text }}</BaseButton
          >
        </div>
      </template>
      <div class="content">
        <div class="cSon">
        </div>
        <div class="lefts">
          <div class="lSon">
            <div>蒙大矿业</div>
            <div class="fontNum">
              <span class="fontJB">{{ showDatas.mdky }}</span
              >万吨
            </div>
          </div>
          <div class="lSon lCenterSon">
            <div>伊化矿业</div>
            <div class="fontNum">
              <span class="fontJB">{{ showDatas.ydky }}</span
              >万吨
            </div>
          </div>
          <div class="lSon">
            <div>南梁矿业</div>
            <div class="fontNum">
              <span class="fontJB">{{ showDatas.nlky }}</span
              >万吨
            </div>
          </div>
        </div>
        <div><img src="/public/chubei.png" class="imgs" /></div>
        <div class="rights">
          <div class="rSon">
            <div>金通矿业</div>
            <div class="fontNum">
              <span class="fontJB">{{ showDatas.jtky }}</span
              >万吨
            </div>
          </div>
          <div class="rSon rCenterSon">
            <div>葫芦素矿业</div>
            <div class="fontNum">
              <span class="fontJB">{{ showDatas.hlky }}</span
              >万吨
            </div>
          </div>
          <div class="rSon">
            <div>门克庆业</div>
            <div class="fontNum">
              <span class="fontJB">{{ showDatas.mkqky }}</span
              >万吨
            </div>
          </div>
        </div>
      </div>
    </Box>
  </div>
</template>
<script setup>
import Box from "@/components/Box/index.vue";
import BaseButton from "@/components/Button/index.vue";
import { reactive,ref } from "vue";
const btnArr = reactive([
  {
    text: "仓储量",
    checked: true,
  },
  {
    text: "销量",
    checked: false,
  },
]);
const showDatas = ref({
  mdky: 5.5,
  ydky: 4.3,
  nlky: 6.5,
  jtky: 5.4,
  hlky: 3.2,
  mkqky: 3.6,
});
function btnFn(item) {
  // 将其他按钮设置成false
  btnArr.forEach((element) => {
    element.checked = false;
  });
  item.checked = true;
  if (item.text === "销量") {
    showDatas.value = {
      mdky: 5.2,
      ydky: 3.3,
      nlky: 2.5,
      jtky: 3.4,
      hlky: 4.2,
      mkqky: 5.6,
    };
  } else {
    showDatas.value = {
      mdky: 5.5,
      ydky: 4.3,
      nlky: 6.5,
      jtky: 5.4,
      hlky: 3.2,
      mkqky: 3.6,
    };
  }
}

</script>
<style scoped>

.pbox {
  width: 100%;
  flex: 1;
}
.rightBtn {
  display: flex;
  gap: 10px;
  
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/public/nei.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.lefts,
.rights {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
}
.lSon {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  padding-right: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.rSon {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  flex: 1;
  display: flex;
  gap: 3px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 30px;
}
.rCenterSon {
  padding-left: 60px;
}

.lCenterSon {
  padding-right: 60px;
}
.imgs {
  width: 55px;
  height: 55px;
}
.cSon {
  position: relative;
  width: 170px;
  height: 170px;
  background-image: url("/public/zhuan.png");
  background-size: contain;
  background-position: center;
  animation: rotateBackground-7bf2a4ed 10s linear infinite;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 12px;
  left: 165px;
}
@keyframes rotateBackground {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.fontNum {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}
.fontJB {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  background: linear-gradient(to bottom, #449cd6, #449cd6, #ffffff);
  /* 将背景裁剪到文字区域 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 设置文字颜色为透明以显示背景渐变 */
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}
</style>